<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <title>Title</title>
</head>
<body>
<div class="layui-container">
    <table class="layui-table" lay-filter="demo" id="test1">
        <thead>
        <tr>
            <th lay-data="{field:'username', width:300,sort:true}">课堂地点</th>
            <th lay-data="{field:'id', width:200, sort:true}">签到范围</th>
            <th lay-data="{field:'deadline',  sort:true}">截至时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="map:${maps}">
            <td th:text="${map.getLocation()}"></td>
            <td th:text="${map.getDistance()}"> </td>
            <td th:text="${#dates.format(map.getDeadline(),'yyyy年MM月dd日 HH:mm:ss')}"></td>
<!--            <td th:text="${map.getClass_id()}"></td>-->
<!--            <td>-->
<!--                <button class="layui-btn" >删除</button>-->
<!--            </td>-->
        </tr>
        </tbody>
    </table>
</div>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        //转换静态表格
        table.init('demo', {
            // height: 500 //设置高度
            limit: 11 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
            ,page: true //开启分页

        });
    });
</script>
</body>
</html>